<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="{{ url_for('static', filename='mobile/js/utils/rem.js') }}" type="text/javascript"
		charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mobile/style/timetable.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mobile/style/association.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mobile/style/course.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mobile/css/app.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mobile/style/signIn.css') }}" />
	<title>Page layout - Professor - before check-in</title>
</head>

<body>
	<div id="app">
		<div @click="hideSide" class="sign-in ass">
			<div class="sign-in-con notification">

				<div class="phone-header">
					<div class="phone-input-con">
						<input type="text" placeholder="search" class="phone-ass-input" />
						<img @click.stop="showSide" src="{{ url_for('static', filename='mobile/img/014.svg') }}"
							class="img-014 cursor-pointer" alt="" />
					</div>
				</div>

				<div class="ass-side" style="display: block;" v-show="isSide">
					<div class="ass-header-phone">
						<div class="ass-logo">logo</div>
						<div class="ass-header-name">XX School</div>
					</div>
					<ul class="ass-side-list">
						<li class="active">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">dashboard</div>
						</li>
						<li class="no-open">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">messenger</div>
						</li>

						<li class="no-open">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">calendar</div>
						</li class="no-open">

						<li class="no-open">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">attendance</div>
						</li>

						<li class="no-open">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">Material upload</div>
						</li>

						<li class="no-open">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">homework</div>
						</li>

						<li class="no-open">
							<div class="ass-icon"></div>
							<div class="ass-side-list-item-con">settings</div>
						</li>
					</ul>
					<a href="{{ url_for('auth.login') }}" class="signOut">
						<img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
						sign out
					</a>
				</div>

				<div class="ass-content">
					{% if timetables | length > 0 %}
					<div id='{{ timetables[0].id }}' ref='current'>
						<p style="padding: 0.5rem 0; font-size: 0.373333rem">
							Courses details
						</p>
						<div class="sign-up">
							<div class="sign-up-left">
								<div class="sign-up-c">
									<p class="sign-up-img"></p>
								</div>
								<div class="sign-up-con">
									<p class="sign-up-cour">{{ timetables[0].course.name }} - {{ timetables[0].title }}
									</p>

									<p class="sign-up-time">({{ strftime(timetables[0].start_time) }} — {{
										strftime(timetables[0].end_time) }}）</p>
									<div class="sign-up-lists">
										<p>
											<span class="sign-up-circle"></span>
											{{ timetables[0].course.lessons }} lesson
										</p>
										<p>
											<span class="sign-up-circle"></span>
											{{ timetables[0].course.duration }} min
										</p>
										<p>
											<span class="sign-up-circle"></span>
											{{ timetables[0].course.number_of_students }} student
										</p>
									</div>
									<p v-if="showStartCourse">
										<button @click.stop="startCourse" class="sign-up-btn">${ startText }$</button>
									</p>
								</div>
							</div>
							<div class="sign-up-right">
								<div class="sign-up-tims">
									<p class="sign-up-number">
										<span>{{ timetables[0].number_of_sign_in }}</span>
										<span>/{{ timetables[0].course.number_of_students }}</span>
									</p>
									<p class="sign-up-right-tips">student</p>
								</div>
								<p style="padding: 0.533333rem 0">
									<button @click.top="countdown" style="margin: 0 auto" :disabled="disable"
										class="sign-up-start-btn sign-up-btn">
										${ signInText }$
									</button>
								</p>
							</div>
						</div>
					</div>
					{% endif %}

					<div class="sign-cons notification">
						<p class="notification-title">
							<span class="notification-sub-title">Upcoming class</span>
							<span class="all">view all</span>
						</p>
						<div class="sign-con-lists">
							{% for timetable in timetables %}
							<div class="sign-con-list">
								<div>
									<p class="sign-con-pic"></p>
									<div class="sign-con-right">
										<p class="sign-con-title">{{ timetable.course.name }} - {{ timetable.title }}
										</p>
										<p class="sign-con-tip">{{ timetable.place }}</p>
										<div class="sign-con-tips">
											<p>
												<span class="sign-con-circle"></span>
												{{ timetable.course.progress }}/{{ timetable.course.lessons }} lesson
											</p>
											<p>
												<span class="sign-con-circle"></span>
												{{ timetable.course.duration }} min
											</p>
											<p>
												<span class="sign-con-circle"></span>
												5 assignment
											</p>
											<p>
												<span class="sign-con-circle"></span>
												{{ timetable.course.number_of_students }} student
											</p>
										</div>
										<p>
											<a href="/course/lesson/{{ timetable.course.id }}">
												<button class="sign-con-btn">Course details</button>
											</a>
										</p>
									</div>
								</div>
							</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.prod.min.js"></script>
	<script>
		Vue.createApp({
			delimiters: ["${", "}$"],
			data() {
				return {
					isSide: false,
					cd: 300,
					counter: 0,
					current: null,
					disable: true,
					interval: null,
					signInText: 'Initiate sign-in'
				}
			},
			mounted() {
				this.getCurrent()
				setInterval(() => {
					if (this.counter <= 0) {
						return
					}
					this.counter--
					this.signInText = this.formatTime(this.counter)
					if (this.counter <= 0) {
						this.signInText = 'End sign-in'
					}
				}, 1000)
			},
			computed: {
				startText() {
					if (!this.current) {
						return ''
					}
					switch (this.current.state) {
						case 'signing_in':
							return 'Start Course'
						case 'started':
							return 'End Course'
						case 'finished':
							return 'Course is over'
						default:
							return ''
					}
				},
				showStartCourse() {
					if (!this.current) {
						return false
					}
					return this.current.state !== 'not_started'
				}
			},
			methods: {
				showSide() {
					this.isSide = true;
				},
				hideSide() {
					this.isSide = false;
				},
				countdown() {
					if (!this.current || this.current.state !== 'not_started') {
						return
					}

					this.disable = true
					axios.put('/data/lesson/' + this.current.id + '/open').then((response) => {
						this.getCurrent()
					}).catch(function (error) {
						this.disable = false
						console.info(error)
					})
				},
				getCurrent() {
					var current = this.$refs.current
					if (!current) {
						return null
					}

					var id = parseInt(this.$refs.current.id)
					axios.get('/data/lesson/' + id).then((response) => {
						this.current = response.data
						this.disable = this.current.state !== 'not_started'
						if (this.current.state === 'finished') {
							this.counter = 0
							this.signInText = 'End sign-in'
						}
						if (this.current.open_time && this.current.state !== 'finished') {
							var now = parseInt(new Date() / 1000)
							var close = parseInt(new Date(this.current.open_time) / 1000) + this.cd
							if (now < close) {
								this.counter = close - now
								this.signInText = this.formatTime(this.counter)
							} else {
								this.counter = 0
								this.signInText = 'End sign-in'
							}
						}
					}).catch(function (error) {
						console.info(error)
					})
				},
				endCourse() {
					if (!this.current || this.current.state !== 'started') {
						return
					}

					axios.put('/data/lesson/' + this.current.id + '/end').then((response) => {
						this.counter = 0
						this.signInText = 'End sign-in'
						this.current = response.data
					}).catch(function (error) {
						console.info(error)
					})
				},
				startCourse() {
					this.endCourse()
					if (!this.current || this.current.state !== 'signing_in') {
						return
					}

					axios.put('/data/lesson/' + this.current.id + '/start').then((response) => {
						this.current = response.data
					}).catch(function (error) {
						console.info(error)
					})
				},
				formatTime(seconds) {
					m = parseInt(seconds / 60)
					s = parseInt(seconds % 60)
					if (m < 10) m = '0' + m
					if (s < 10) s = '0' + s
					return m + ':' + s
				},
			}
		}).mount('#app')
	</script>
</body>

</html>